<template>
  <a-popover
    v-model:open="visible"
    placement="bottomLeft"
    trigger="click"
    overlay-class-name="my-popover"
  >
    <template #content>
      <div @click="hide">
        <slot />
      </div>
    </template>
    <ellipsis-outlined class="icon" />
  </a-popover>
</template>

<!--组件自定义-表格操作栏-下拉操作-->
<script setup lang="ts">
import { ref } from 'vue'
import { EllipsisOutlined } from '@ant-design/icons-vue'

const visible = ref<boolean>(false)

const hide = (): void => {
  visible.value = false
}
</script>

<style lang="less">
.my-popover {
  li {
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #1d2c51;
    line-height: 18px;
    &:hover {
      background: #eff0f4;
    }
    span {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
</style>
